<template>
  <div :id="chartId" style="width:100%;height:100%" />
</template>

<script>
import * as echarts from 'echarts'
export default {
    name: 'EchartDashboard',
    props: {
        chartId: { type: String, default: function() { return 'myCharts' } }, // 图表id，当一个页面多图表时需要传此参数\
        alldata: { type: Array, default: function() { return [] } }, // 图表数据
        circleCenter: { type: Array, default: function() { return ['50%', '50%'] } }, // 图表位置
        startAngles: { type: Array, default: function() { return ['100', '100'] } }
    },
    data() {
        return {
            myChart: null
        }
    },
    watch: {
        alldata(val) {
            this.creatEcharts()
        }
    },
    created() {
        window.addEventListener('resize', this.onresize)
        this.$bus.on('toggleClick', () => {
            setTimeout(() => {
                this.$nextTick(() => {
                    this.onresize()
                })
            }, 300)
        })
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.onresize)
        this.$bus.off('toggleClick', this.onresize)
    },
    mounted() {
        this.creatEcharts()
        setTimeout(() => {
            this.onresize()
        }, 300)
    },
    methods: {
        creatEcharts() {
            const vessel = document.querySelector('#' + this.chartId)
            const myChart = echarts.init(vessel)
            this.myChart = myChart
            const seriesArr = []
            // const titleArr = []
            this.alldata.forEach((el, index) => {
                seriesArr.push({
                    name: el.name,
                    type: 'gauge',
                    startAngle: 180,
                    endAngle: 0,
                    splitNumber: 5,
                    max: this.startAngles[index],
                    avoidLabelOverlap: false,
                    center: this.circleCenter[index],
                    data: [el],
                    axisLine: {
                        lineStyle: {
                            color: [[1, '#78E78E']]
                        }
                    },
                    axisTick: {
                        lineStyle: {
                            color: '#78E78E'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#78E78E'
                        }
                    },
                    axisLabel: {
                        color: '#fff'
                    },
                    detail: {
                        color: '#fff'
                    },
                    title: {	// 仪表盘标题。
                        show: true,				// 是否显示标题,默认 true。
                        offsetCenter: [0, '75%'], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
                        color: '#72F9FE',
                        fontWeight: '100',
                        fontSize: '14'
                    }
                })
            })
            const option = {
                series: seriesArr
            }
            myChart.setOption(option, true)
        },
        onresize() {
            if (this.myChart !== null) {
                this.myChart.resize()
            }
        }
    }
}
</script>

<style scoped lang="scss">

</style>
